<template>
  <div class="screen-content">
    <div ref="screen" class="screen">
      <header class="header">
        <div class="title">可视化大屏数据统计中心</div>
      </header>
      <main class="main">
        <aside class="left">
          <div class="chart-area">
            <h3 class="chart-title">区域用群画像</h3>
            <div ref="usersChart" class="chart"></div>
          </div>
        </aside>
        <main class="center"></main>
        <aside class="right"></aside>
      </main>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      uiWidth: 1920,
      uiHeight: 1080,
    };
  },
  methods: {
    bigScreenInit() {
      const cWidth = document.documentElement.clientWidth;
      const cHeight = document.documentElement.clientHeight;
      console.log(cWidth);
      const scale =
        cWidth / cHeight > this.uiWidth / this.uiHeight
          ? cHeight / this.uiHeight
          : cWidth / this.uiWidth;
      const screen = this.$refs.screen;
      screen.style.transform = `scale(${scale}) translate(-50%,-50%)`;
    },
    initUsersChart() {
      //初始化echarts实例
      this.usersChart = echarts.init(this.$refs.usersChart);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          bottom: 15,
          textStyle: {
            color: "#fff",
          },
          itemWidth: 10,
          itemGap: 40,
          icon: "square",
        },
        grid: {
          left: 30,
          right: 20,
          bottom: 44,
          top: 0,
          containLabel: true,
        },
        xAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              width: 1,
              color: "rgba(255,255,255,0.15)",
            },
          },
        },
        yAxis: {
          type: "category",
          data: ["北京", "上海", "广州", "深圳", "成都", "长沙", "西安"],
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "用群一",
            type: "bar",
            barWidth: 15,
            stack: "total",
            label: {
              show: false,
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0.5, 1, 0.5, [
                { offset: 0, color: "#1B63CC" },
                { offset: 1, color: "#03DFFC" },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [320, 302, 301, 334, 390, 330, 320],
          },
          {
            name: "用群二",
            type: "bar",
            barWidth: 15,

            stack: "total",

            label: {
              show: false,
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0.5, 1, 0.5, [
                { offset: 0, color: "#05A998" },
                { offset: 1, color: "#63FBFC" },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "用群三",
            type: "bar",
            barWidth: 15,
            stack: "total",
            label: {
              show: false,
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0.5, 1, 0.5, [
                { offset: 0, color: "#2D5CBD" },
                { offset: 1, color: "#40A0FA" },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
        ],
      };
      this.usersChart.setOption(option);
    },
  },
  mounted() {
    this.bigScreenInit();
    window.onresize = () => this.bigScreenInit();
    this.initUsersChart();
  },
  beforeDestroy() {
    window.onresize = null;
  },
};
</script>

<style lang="stylus" scoped>
.screen-content
    height 100vh
    width 100vw
    background-color #04072F
    .screen
        width 1920px
        height 1080px
        position fixed
        top 50%
        left 50%
        transform-origin: 0 0
        .header
            height 75px
            width 1920px
            background-image url('../../assets/header_bg.png')
            background-size 100% 100%
            position: relative
            .title
                font-size: 36px;
                font-weight: 900;
                color white
                position: absolute
                left 50%
                top 50%
                transform: translate(-50%,-50%)
        .main
            display flex
            .left
                width 430px
                background: #050D4B;
                border: 2px solid #08488A;
                box-shadow:inset 0px 1px 20px  #128EE8;
                .chart-area
                    display flex
                    flex-direction column
                    .chart-title
                        color: #fff
                        font-size: 18px;
                        font-weight: 700;
                        padding-left 24px
                        position relative
                        margin 20px 0 30px 0
                        &::before
                            content ''
                            display inline-block
                            width 11px
                            height 18px
                            position absolute
                            top -5px
                            left 5px
                            background-image url("../../assets/chart_title_icon.png")
                            background-size 100% 100%
                    .chart
                        width 410px
                        height 420px
</style>
